<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <title>选择同事</title>
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/weui.min.css')}}">
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/jquery-weui.css')}}">
    <link rel="stylesheet" href="{{asset('/css/system/iconfont.css')}}">
    @if($skinid == 3)
        <link rel="stylesheet" href="/css/system/common.css?v=2018121301">
        <link rel="stylesheet" href="/css/system/pick-colleague.css">
    @elseif($skinid == 1)
        <link rel="stylesheet" href="/css/theme-blue/system/common.css">
        <link rel="stylesheet" href="/css/theme-blue/system/pick-colleague.css">
    @elseif($skinid == 2)
        <link rel="stylesheet" href="/css/theme-pink/system/iconfont-pink.css">
        <link rel="stylesheet" href="/css/theme-pink/system/common.css">
        <link rel="stylesheet" href="/css/theme-pink/system/pick-colleague.css">
    @endif
    @include('sysadmin.head')
    <style>
        .show-hidden{
            z-index:999;
        }
    </style>
</head>
<body ontouchstart>
<div class="mian-container">
    <div class="pick-colleague">
        <header class="fixed">
            <div class="header">
            </div>
        </header>
<!--
       <div class="list-input">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" action="" method="">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                </label>
            </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>       
       </div>
-->
       <div id="letter" ></div>
        <div class="sort_box weui-cells weui-cells_checkbox">
            @foreach($users as $u)
                <label class="sort_list weui-cell weui-check__label">
                    <div class="weui-cell__hd">
                        <input type="checkbox" data-id="{{$u->id}}" class="weui-check"  @if($u->is_checked == 1) checked @endif>
                        <i class="weui-icon-checked"></i>
                    </div>
                    <div class="num_logo weui-cell__hd">
                        <img class="l1 user-{{$u->id}}" src="{{userlogo($u->id)}}" alt="" data-id="user-{{$u->id}}">
                    </div>
                    <div class="num_name">{{$u->qw_name}}</div>
                    {{--<span class="circle-span span-reward"></span>--}}
                </label>
            @endforeach
        </div>
        {!! csrf_field() !!}
        <input type="hidden" name="groupid" value="{{$groupid}}">
        <div class="initials">
            <ul>
               
            </ul>
        </div>
    </div>
    <div class="total-num weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>已选择：<span class="select-num"></span></p>
            </div>
            <div class="weui-cell__ft"><a class="num-btn" href="javascript:void(0);">完成</a></div>
        </div>
    </div>
 <!-- 隐藏考核按钮部分-->
    @include('sysadmin.admin-caidan')
</div>
<script src="{{asset('/kaohe/js/jquery-2.1.4.min.js')}}"></script>
<script src="{{asset('/addons/jquery-weui-build/js/fastclick.js')}}"></script>
<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script src="{{asset('/addons/jquery-weui-build/js/jquery-weui.min.js')}}"></script>
<script src="{{asset('/kaohe/js/jquery.charfirst.pinyin.js')}}"></script>
<script src="{{asset('/kaohe/js/sort.js')}}"></script>
<script>
    $(document).ready(function () {
        var num=0;
        $('.weui-check').each(function(){
            if($(this).prop("checked")){
                num += 1;
            }
        });
        $('.select-num').text(num);
        $('.total-num').css('display','block');
        $('body').on('click','.weui-check',function(){    
            var clas=$(this).parent().next().find('img').attr('class')
             if ($(this).prop("checked")) {
                 $('.total-num').css('display','block');
                 $('.pick-colleague').css('padding-bottom','115px');
                 var src=$(this).parent().next().find('img').attr('src');                 
                 $('.header').append('<img class="'+clas+'" src="'+src+'">');
                 num++;
             } else {
                 var did=$(this).parent().next().find('img').attr('data-id');
//                 $('.header .'+clas).detach();
                 $('.header .'+did).remove();
                 num--;
             }
            if(num==0){
                //$('.total-num').css('display','none');
                $('.pick-colleague').css('padding-bottom','65px');
            }
            $('.select-num').text(num);
        })


//        一进页面header就要显示已勾选的头像
        $('.weui-check').each(function(){
            if($(this).prop("checked")){
                var clas=$(this).parent().next().find('img').attr('class')
                var src=$(this).parent().next().find('img').attr('src');
                $('.header').append('<img class="'+clas+'" src="'+src+'">');
            }
        });

        $('.num-btn').click(function(){
            $('.total-num').css('display','none');
             $('.pick-colleague').css('padding-bottom','65px');
            var token = $('input[name=_token]').val();
            var groupid = $('input[name=groupid]').val();
            var ids = [];
            $('.sort_box input[type="checkbox"]').each(function () {
                if ($(this).is(':checked')) {
                    ids.push($(this).attr('data-id'));
                }
            });
            $.ajax({
                'url': '/sysadmin/group/set-member?_token='+token+'&groupid='+groupid,
                'type': 'POST',
                'data': {'userid':JSON.stringify(ids)},
                error: function (request) {
                    $.toast('网络错误',"text");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        $.toast("操作成功");
                        setTimeout(function(){ window.location.href='/sysadmin/permission/index' }, 1000);
                    } else {
                        $.toast(data.msg,"text");
                    }
                },
            });
        });
         $('.kaohe-item').click(function(){
            $('.show-hidden').toggle();
        })
        $('.admin-item').click(function(){
            $('.front-show-hidden').toggle();
        });
    })
</script>
</body>
</html>